/* 
  第18节：模块化操作
    在ES5中我们要进行模块华操作需要引入第三方类库，随着前后端分离，前端的业务日渐复杂，ES6为我们增加了模块话操作。模块化操作主要包括两个方面。
      export :负责进行模块化，也是模块的输出。
      import : 负责把模块引，也是模块的引入操作。
  
  ------------------------------------------------------------------------------------------
  
  export的用法：
    export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。
  export var a = 'jspang';
  
  然后可以在index.js中以import的形式引入。
    import {a} from './temp.js';
    console.log(a);
  这就是一个最简单的模块的输出和引入。  
  
  ------------------------------------------------------------------------------------------

  多变量的输出
    这里声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。

  var a ='jspang';
  var b ='技术胖';
  var c = 'web';
  
  export {a,b,c}  

  ------------------------------------------------------------------------------------------

  函数的模块化输出
  export function add(a,b){
    return a+b;
  }

  ------------------------------------------------------------------------------------------

  as的用法
    有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。

  var a ='jspang';
  var b ='技术胖';
  var c = 'web';
  export {
      x as a,
      y as b,
      z as c
  }

  ------------------------------------------------------------------------------------------

  export default的使用
    加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export   default的区别

  1.export
    export var a ='jspang';
  
    export function add(a,b){
        return a+b;
    }

  对应的导入方式  
    import {a,add} form './temp';//也可以分开写

  2.export defalut
    export default var a='jspang';

  对应的引入方式  
    import str from './temp';

  ES6的模块化不能直接在浏览器中预览，必须要使用Babel进行编译之后正常看到结果。这节课讲完我们ES6的课程就算结束了，你可能觉的没有书上的内容多，那是因为很多东西都归到了ES7中。甚至连Babel都不能很好的转换，这些知识我就不给大家讲解了。另外如果你想继续深入学习，可以搜索阮一峰大神的ES6在线图书。我是技术胖，那我们下套课程见了。  
    在scr 目录下输入命令babel-node index.js 即可在命令行里面看到效果

  总结: export 暴露的名称, 在import引入的时候,必须要用{} 并且名字也要和暴露出来的一致
        export default 暴露的东西, 在import引入的时候, 不需要{}  ,并且名字也可以自己取  

  */

// export的用法：

// import {a} from './temp.js';  // {b}  里面的名字,要和暴露出来时候的一样,否则拿不到,并且{}必须加上
// console.log(a);

// 多变量的输出
// import {a,b,c,d} from './temp';
// console.log(a,b,c,d);  // 暴露出来的时候,没有d 所以d为undefined

// 函数的模块化输出
// import {add} from './temp'  //函数导入,也需要{} 并且名字也要对应
// console.log(add(1,2));


// as的用法  测试失败
// import {name,cname,skill} from './temp';
// console.log(name,cname,skill);
// console.log(j(1,2));


// export default的使用
// import {a,c} from './temp'
// console.log(a,c);

import str from './temp'  //这个报错,好奇怪,有待验证
console.log(str);